<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>推荐路线</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .route-step { margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 5px; }
        .step-instruction { font-weight: bold; }
        .step-detail { color: #666; margin-left: 15px; }
    </style>
</head>
<body>
    <h1>推荐路线查询</h1>
    <label for="start">起点坐标 (纬度,经度): </label>
    <input type="text" id="start" placeholder="34.106054,109.343291"><br><br>
    <label for="end">终点坐标 (纬度,经度): </label>
    <input type="text" id="end" placeholder="34.107256,109.342358"><br><br>
    <button onclick="getRoute()">获取推荐路线</button>

    <h2>推荐路线详情</h2>
    <div id="result"></div>

    <script>
        function handleRouteResponse(data) {
            const routeInfo = formatRoute(data);
            document.getElementById('result').innerHTML = routeInfo;
        }

        function getRoute() {
            const start = document.getElementById('start').value;
            const end = document.getElementById('end').value;

            // 移除旧的script标签（如果存在）
            const oldScript = document.getElementById('baiduApiScript');
            if (oldScript) oldScript.remove();

            // 创建新的JSONP请求
            const script = document.createElement('script');
            script.id = 'baiduApiScript';
            script.src = `https://api.map.baidu.com/direction/v2/driving?origin=${start}&destination=${end}&ak=SGEyhSS0Fir6EBEoarGXd8UubB75a1YI&callback=handleRouteResponse`;
            document.body.appendChild(script);
        }

        function formatRoute(data) {
            if (data.status !== 0) {
                return `<div class="error">错误: ${data.message || '无法获取路线信息'}</div>`;
            }

            const route = data.result.routes[0];
            let output = `
                <div class="route-summary">
                    <h3>路线概览</h3>
                    <p><strong>总距离:</strong> ${(route.distance/1000).toFixed(2)}公里</p>
                    <p><strong>预计时间:</strong> ${Math.floor(route.duration/60)}分钟</p>
                    <p><strong>路线标签:</strong> ${route.tag || '无'}</p>
                </div>
                <h3>详细步骤</h3>
            `;

            route.steps.forEach((step, index) => {
                const directionText = getDirectionText(step.direction);
                output += `
                <div class="route-step">
                    <div class="step-instruction">步骤 ${index+1}: ${directionText} ${step.road_name || '无名路'}</div>
                    <div class="step-detail">
                        <p>距离: ${step.distance}米</p>
                        <p>预计时间: ${step.duration}秒</p>
                        <p>道路类型: ${getRoadType(step.road_type)}</p>
                    </div>
                </div>
                `;
            });

            return output;
        }

        // 辅助函数：将方向代码转换为文字
        function getDirectionText(direction) {
            const directions = {
                0: '正北', 1: '东北', 2: '正东', 3: '东南',
                4: '正南', 5: '西南', 6: '正西', 7: '西北',
                8: '正北', 9: '西北', 10: '西', 11: '西南',
                12: '南', 13: '东南', 14: '东', 15: '东北'
            };
            return directions[direction] || `方向(${direction})`;
        }

        // 辅助函数：将道路类型代码转换为文字
        function getRoadType(type) {
            const types = {
                0: '高速', 1: '城市快速路', 2: '国道',
                3: '省道', 4: '县道', 5: '乡村道路',
                6: '其他道路', 7: '步行道路', 8: '轮渡',
                9: '其他'
            };
            return types[type] || `未知道路类型(${type})`;
        }
    </script>
</body>
</html>